<script lang="ts" setup>
// vue
import { defineAsyncComponent } from "vue";

// 动画css
import "animate.css/animate.min.css";

// 组件
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const searchIcon = ref(Search);
// 动态加载components文件下所有组件
const allComponents = import.meta.glob("./components/*.vue");
const components: any = ref({});
Object.entries(allComponents).forEach(([path, asyncCom]) => {
  const name = path.replace(/\.\/components\/(.*)\.vue/, "$1");
  components.value[name] = defineAsyncComponent(asyncCom);
});

// Store
import { useDrawerStoreHook } from "@/stores/modules/drawer"; // 抽屉
import { useKBStoreHook } from "@/stores/modules/KB"; // tags

// 接口
import { fetchKeyWordQuery } from "@/api/associationAnalysis"; // 条件查询点接口

// 侧边栏展示与隐藏
const useDrawer = useDrawerStoreHook(); // 抽屉
const show = computed(() => useDrawer.rightShow); // 控制显示与隐藏

// 标签页默认值
const activeName = ref("详情");

// 获取 tag option 筛选框数据
const useKBStore = useKBStoreHook();
const tagsOption = computed(() => useKBStore.tags);

const isSearch = ref(false); // 搜索结果弹窗
const query = ref(""); // 搜索框的值
const tag = ref(""); // tag的值
const page = ref(1); // 搜索分页
const nodes = ref([]); // 搜索结果list
const isCall = ref(false); // 是否可以调用getNodes回调函数
const isEmpty = ref(true); // 是否是无数据状态

// 搜索事件，调用接口
const handleSearch = async (isStart = false) => {
  let params = {
    tag: tag.value,
    query: query.value,
    page: page.value,
  };

  const { code, data } = await fetchKeyWordQuery(params);
  if (code == 200) {
    isSearch.value = true;
    isEmpty.value = data.rows.length === 0 && page.value === 1;
    // 已到最大页数，组件不可调用getNodes回调函数,未到最大页数，组件可以继续调用getNodes回调函数
    isCall.value = page.value === data.pages || isEmpty.value;
    isStart ? (nodes.value = []) : "";
    let newNodes = data.rows.map((item) => {
      item.id = item.vid;
      item.label = getSysName(item.tags);
      return item;
    });
    setTimeout(() => {
      nodes.value = nodes.value.concat(newNodes);
    }, 500);
  }
};

// 搜索结果获取sysName值
const getSysName = (tags) => {
  let sysName = "";
  tags.forEach((item) => {
    if (item.properties.sys_name) {
      sysName = item.properties.sys_name;
    }
  });
  return sysName;
};

// 搜索结果弹窗下拉加载
const getNodes = () => {
  page.value++;
  handleSearch();
};

// 关闭搜索结果弹窗事件
const handleClose = () => {
  isSearch.value = false;
  page.value = 1;
  nodes.value = [];
};
</script>

<template>
  <transition name="fade">
    <div v-if="show" class="drawerRight">
      <!--      搜索输入框-->
      <el-input
        v-model="query"
        class="input-with-select"
        clearable
        placeholder="搜索知识名称"
        @focus="handleClose"
      >
        <template #prepend>
          <el-select
            v-model="tag"
            clearable
            placeholder="全部"
            style="width: 80px"
            @focus="handleClose"
            popper-class="drawerRightSelect"
          >
            <el-option
              v-for="(item, index) in tagsOption"
              :key="index"
              :label="item.name"
              :value="item.code"
              :title="item.name"
            />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="searchIcon" @click="handleSearch(true)" />
        </template>
      </el-input>

      <!--      分类-->
      <el-tabs v-model="activeName" class="mt-4" stretch v-if="show">
        <el-tab-pane label="详情" name="详情">
          <component :is="components.details"></component>
        </el-tab-pane>
        <el-tab-pane label="统计" name="统计">
          <component :is="components.statistics"></component>
        </el-tab-pane>
        <!--        <el-tab-pane label="属性" name="属性">-->
        <!--          <component :is="components.keys"></component>-->
        <!--        </el-tab-pane>-->
        <el-tab-pane label="过滤" name="过滤">
          <component :is="components.filters"></component>
        </el-tab-pane>
      </el-tabs>

      <!--      搜索结果弹窗-->
      <!-- <transition name="searchPop"> -->
      <component
        :is="components.searchPop"
        v-if="isSearch"
        :isCall="isCall"
        :isEmpty="isEmpty"
        :nodes="nodes"
        @close="handleClose"
        @getNodes="getNodes"
      ></component>
      <!-- </transition> -->
    </div>
  </transition>
</template>

<style lang="scss" scoped>
.drawerRight {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 372px;
  height: 100%;
  padding: 16px;
  overflow: hidden;
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid #edeff4;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 2px 8px 0 rgb(13 22 50 / 10%);
}

.fade-enter-active {
  animation: fadeInRight 0.5s;
}

.fade-leave-active {
  animation: fadeOutRight 0.5s;
}

.searchPop-enter-active {
  animation: fadeIn 0.3s;
}

.searchPop-leave-active {
  animation: fadeOut 0.3s;
}

.drawerRightSelect {
  .el-select-dropdown__item {
    max-width: 300px;
  }
}
</style>
